<template>
	<view class="detail-page">
		<view>
			<navBar title="进度详情" goBackUrl="/pages/homePage/homePage" @goBack="goBack"></navBar>
		</view>
		<view style="height: 30rpx;background:#f5f7fb ;">
			
		</view>
		<view class="con_top">
			<view class="row_line">
				<text class="line_name">管理人员</text>
				<text class="line_value">
					<text v-for="(it, index) in objData.pmprManagePersonList" :key="it.id">{{it.personName}}
						<text v-if="objData.pmprManagePersonList.length -1 != index">,</text>
					</text>
				</text>
			</view>
			<view class="row_line">
				<text class="line_name">劳务人员</text>
				<text class="line_value">{{objData.laborNum || ''}}人</text>
			</view>
			<view class="row_line">
				<text class="line_name">施工工法</text>
				<text class="line_value">{{getConstructionMethod(objData.constructionMethod)}}</text>
			</view>
			<!-- <view class="row_line">
				<text class="line_name">工作量明细</text>
				<view class="line_value">
					<text v-if="pageType === 'gh' || pageType === 'xgh'">小计：{{subtotal || ''}}环</text>
					<text v-if="pageType === 'wrd'">小计：{{pmprWorkloadList.length || ''}}孔次</text>
					<u-icon name="arrow-down" color="#bec1c3" size="20"></u-icon>
				</view>				
			</view> -->
		</view>
<!-- 		<view class="work_detail" v-for="(item,index) in  (pageType === 'xgh' ? pmprWorkloadList.filter(item =>  !item.isHidden) : pmprWorkloadList) " :key="item.id"
			:style="{marginBottom:`${pmprWorkloadList.length -1 !== index ? '30rpx' :''}`}">
			<view class="top_name">
				<text v-if="pageType === 'gh' || pageType === 'xgh'">{{item.steelRingProcedureName}}</text>
				<view v-else style="display: flex;justify-content: space-between;">
					<text>{{item.ringNumber}}孔</text>
					<text>水玻璃：{{item.loweGroutingAmount}}升</text>
					<text>水泥浆：{{item.sludgeGroutingAmount}}升</text>
				</view>
			</view>
			<view class="top_value" v-if="pageType === 'gh' || pageType === 'xgh'">
				<text v-for="(it,index) in item.ring" :key="it.id">
					<text>{{it}}</text>
					<text v-if="item.ring.length - 1 !== index">,</text>
				</text>
			</view>
			<view class="top_img" v-if="item.imgs.length>0">
				<u-album :urls="item.imgs" space="10" multipleSize="90"></u-album>
			</view>
		</view>
		<view class="xiaohao">
			<text>材料消耗</text>
			<u-icon name="arrow-down" color="#bec1c3" size="20"></u-icon>
		</view>
		<view class="material_box">
			<u-empty v-if="list.length<=0" mode="data" text="材料为空" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			<u-cell-group :customStyle="{background:'white'}" v-for="(item, index) in list" :key="index">
				<u-cell :title="item.title" :value="`${item.weight}${item.unit||''}`" center></u-cell>
				<template v-if="item.childrenData.length > 0">
					<view class="" v-for="(it_item, i_index) in item.childrenData" :key="i_index">
						<u-cell center>
							<text slot="label" style="font-size: 30rpx;">规格型号：{{it_item.size}}</text>
							<text slot="value" style="font-size: 30rpx;">消耗量：{{it_item.weight}} {{it_item.unit}}</text>
						</u-cell>
					</view>
				</template>
			</u-cell-group>
		</view> -->
		<view class="work-title">
			<view>工作量明细</view>
			<view class="num">
				<text v-if="pageType === 'gh' || pageType === 'xgh'">小计  {{subtotal || ''}}环</text>
				<text v-else>小计  {{holeTotal || ''}}孔次</text>
			</view>
		</view>	
		<u-empty v-if="pmprWorkloadList.length<=0" mode="data" text="工作量明细为空" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		<view class="work_detail" v-for="(item,index) in (pageType === 'xgh' ? pmprWorkloadList.filter(item =>  !item.isHidden) : pmprWorkloadList)" :key="item.id">
			<view v-if="pageType === 'gh' || pageType === 'xgh'">
				<view class="" style="border-bottom: 1px solid #e2e5ed;color: #445469; font-size: 32rpx; font-weight: bold;">施工工序{{ index + 1 }}</view>
				<view class="card">
					<view class="inline-item">
						<view class="label">施工工序</view>
						<view class="label-content">{{item.steelRingProcedureName}}</view>
					</view>
					<view class="inline-item ring">
						<view class="label">环号</view>
						<view class="label-content ring">{{item.ring.join('/')}}</view>
					</view>
					<view class="inline-item-picture">
						<view class="label">施工图片</view>
							<u-album :urls="item.imgs" space="10" multipleSize="90"></u-album>
					</view>
				</view>	
			</view>
			
			<view v-else>
				<view style="border-bottom: 1px solid #e2e5ed;color: #445469; font-size: 32rpx; font-weight: bold;">施工工序{{ index + 1 }}</view>
				<view class="card">
					<view class="inline-item" style="height: auto;">
						<view class="label">工序名称</view>
						<view class="label-content">
							<text>{{ item.steelRingProcedureName }}</text>
							<text style="margin-left: 10rpx;">{{item.ringNumber || ''}}{{ item.workload || '' }}</text>
						</view>
					</view>
					<view class="" v-if="item.steelRingProcedureName === '注浆' ">
						<view class="inline-item">
							<view class="label">水玻璃</view>
							<view class="label-content">{{item.loweGroutingAmount}}升</view>
						</view>
						<view class="inline-item">
							<view class="label">水泥浆</view>
							<view class="label-content">{{item.sludgeGroutingAmount}}升</view>
						</view>
					</view>
					<view class="inline-item-picture">
						<view class="label">施工图片</view>
							<u-album :urls="item.imgs" space="10" multipleSize="90"></u-album>
					</view>
				</view>	
			</view>
		</view>
		<view class="work-title">材料消耗</view>
		<view class="material_box">
			<u-empty v-if="list.length<=0" mode="data" text="材料为空" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			<u-cell-group :customStyle="{background:'white'}"
				 v-for="(item, index) in list" :key="index">
			    <u-cell  :title="item.title" :value="`${item.weight}${item.unit}`" center></u-cell>
				<template  v-if="item.childrenData.length > 0">
					<view v-for="(it_item, i_index) in item.childrenData" :key="i_index">
						<u-cell center>
							<text slot="label" style="font-size: 30rpx;">规格型号</text>
							<text slot="value" style="font-size: 30rpx;">{{it_item.size}}</text>
						</u-cell>
						<u-cell center>
							<text slot="label" style="font-size: 30rpx;">消耗量</text>
							<text slot="value" style="font-size: 30rpx;">{{it_item.weight}}{{it_item.unit}}</text>
						</u-cell>
					</view>
				</template>
				
			</u-cell-group>
		</view>
		<view class="footer-button">
			<view class="button-placeholder"></view>			
			<view class="button-group">
				<view @click="fnNavToCharts" class="button-primary">进度表</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {
		getPicture
	} from '@/api/doc.js' //获取图片
	import {
		getProcessById,
		pmProcessReportGetDetail
	} from '@/api/comprehensive/comprehensive.js'
	export default {
		data() {
			return {
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				list: [],
				processId: -1,
				// 页面数据
				objData: {},
				pmprWorkloadList: [], //绑定在页面上的工作量明细
				subtotal: 0, //工作明细的小计
				// 区分钢环还是微扰动
				pageType: '',
				holeTotal:0
			}
		},
		/**
		 * 跳进此页面时请携带id 和 dataType参数
		 * processId:进度id
		 * dataType:工法  区分钢环还是微扰动
		 * @param {Object} option
		 */
		onLoad(option) {
			console.log(option)
			if (option.processId && option.dataType) {
				this.processId = option.processId;
				this.pageType = option.dataType
				this.processReport();
			}
		},
		methods: {
			// 返回上一级
			goBack(url) {
				// uni.switchTab({
				// 	url: url
				// })
				uni.navigateBack({
					
				})
			},
			/**
			 * 分辨工法是钢环还是微扰动
			 * @param {String} str 
			 */
			getConstructionMethod(str) {
				// 建议从字典表接口获取 login调用了一次
				let res = '';
				switch (str) {
					case 'wrd':
						res = '微扰动'
						break;
					case 'gh':
						res = '钢环'
						break;
					case 'xgh':
						res = '9-11型小钢环'
						break;
					case 'other':
						res = '其他'
						break;
				}
				return res
			},
			/**
			 * 得到详情页数据
			 */
			processReport() {
				pmProcessReportGetDetail({
					id: this.processId
				}).then(res => {
					console.log(res, '看看数据')
					// 组装工作量明细的数据 仅限环号
					// if(this.pageType === 'gh') {
					// 	this.pageType === 'gh' && this.ringDataConcat(res.result.pmprWorkloadList);
					// }else if(this.pageType === 'xgh') {
					// 	this.pageType === 'xgh' && this.ringDataConcat(res.result.pmprWorkloadList);
					// }
					
					// // 微扰动页面的工作明细
					// this.pageType === 'wrd' && this.wrdRingDataConcat(res.result.pmprWorkloadList);
					// 微扰动页面的工作明细
					if(this.pageType.indexOf("wrd") !== -1) {
						this.wrdRingDataConcat(res.result.pmprWorkloadList);
					}else {
						this.ringDataConcat(res.result.pmprWorkloadList);
					}
					// 材料消耗
					this.pmprMaterial(res.result.pmprMaterialList);

					this.objData = res.result;

					// 判断数据中是否有docsId,有的话从数据库中获取图片
					this.pmprWorkloadList.forEach(async (it, index) => {
						// console.log(it, '爱仕达')
						it.imgs = new Array();
						// 区分页面是属于钢环还是微扰动 钢环是有docsId:Number[]数组  微扰动则是单独的docId:Number
						if (it.docId) {
							it.imgs = await this.getItemImage(it.docId);
							this.$set(this.pmprWorkloadList, index, it);
						} else if (it.docsId) {
							it.docsId = Array.from(new Set(it.docsId))
							it.imgs = await this.getItemImage(it.docsId[0]);
							this.$set(this.pmprWorkloadList, index, it);
						}
					})
				})
			},
			/**
			 * 获取到docId中的图片并且拼成网络路径格式
			 * @param {Number} docId
			 * @return {String} //拼好的网络路径格式
			 */
			async getItemImage(docId) {
				console.log('传进来的文档id', docId, this.$config.IMG_FILE_URL);
				return await new Promise((resolve, reject) => {
					getPicture({
						docId
					}).then(res => {
						resolve(res.result.map(it => this.$config.IMG_FILE_URL + it.fileName));
					}).catch(err => reject(err))
				})
			},
			/**
			 * 钢环和微扰动的材料消耗 -通用
			 * 组装成绑定于页面上的list格式
			 * @param {Array} temp 接口的材料消耗数据
			 */
			pmprMaterial(temp) {
				let resultData = []; // 筛选的最后结果

				temp.forEach(it => {
					//resultData 的元素 materialList:
					let obj = {
						// 该材料对应的所有的型号 对象数组 包含型号名-specificationModel 和消耗量-num
						materialModelList: [],
						// 其他需要的信息  
						steelRingProcedureName: it.parentTypeName + '-' + it.deviceTypeName,
						// 当前材料的总计消耗量
						totalSubtotal: 0,
						id: it.id,
						unit:''
					};
					// 根据名字来筛选出同类的
					let name = it.parentTypeName + '-' + it.deviceTypeName;
					let filterRes = temp.filter(kt => {
						return kt.parentTypeName + '-' + kt.deviceTypeName === name
					})
					console.log(filterRes, '过滤后得数据')
					filterRes.forEach(kt => {
						obj.totalSubtotal += Number.parseFloat(kt.num);
						obj.unit = kt.unit
						obj.materialModelList.push({
							specificationModel: kt.deviceTypeAttributeName,
							num: kt.num,
							// 材料消耗的节点
							stationName: kt.stationName,
							unit:kt.unit
						});
					});
					console.log(obj);
					console.log(resultData)
					resultData.find(kt => kt.steelRingProcedureName == obj.steelRingProcedureName) == undefined &&
						resultData.push(obj)
				})
				console.log('看组装的数据双块水泥', resultData)

				// 绑定在list上
				this.list = resultData.map(it => {
					return {
						title: it.steelRingProcedureName,
						weight: it.totalSubtotal,
						unit:it.unit,
						childrenData: it.materialModelList.map(kt => {
							return {
								size: kt.specificationModel,
								weight: kt.num,
								stationName: kt.stationName,
								unit:kt.unit,
							}
						})
					}
				})
			},
			/**
			 * 微扰动的数据 微扰动页面
			 * @param {Array} temp
			 */
			wrdRingDataConcat(temp) {
				this.pmprWorkloadList = temp
				this.holeTotal = this.pmprWorkloadList.length
				console.log(temp, 'kk1222')
			},
			/**
			 * 关于是环号的页面工作明细数据的拼接 仅限钢环页面
			 * @param {Array} temp
			 */
			ringDataConcat(temp) {
				let resultData = []; // 筛选的最后结果
				temp.forEach(it => {
					//resultData 的元素 ring:环号数组
					let obj = {
						ring: [],
						// 其他需要的信息, 图片; 需要接口的数据就加载obj里面
						steelRingProcedureName: it.steelRingProcedureName,
						id: it.id,
						workload: it.workload, //系数
						constructionMethod:it.constructionMethod
					};

					// 根据名字来筛选出同类的
					let name = it.steelRingProcedureName;
					let filterRes = temp.filter(kt => {
						return kt.steelRingProcedureName === name
					})
					// 如果有docId为有图片的情况，添加到数组中
					it.docId && (obj.docsId = new Array());
					filterRes.forEach(kt => {
						obj.ring.push(kt.ringNumber + '环');
						it.docId && obj.docsId.push(kt.docId);
					});

					resultData.find(kt => kt.steelRingProcedureName == obj.steelRingProcedureName) == undefined &&
						resultData.push(obj);

				})
				// 算出每个元素的系数： 环号数 * 工作系数
				resultData = resultData.map(it => {
					return {
						...it,
						isHidden: it.isHidden && it.isHidden == 'true' ? true : false,
						totalWordlorad:it.constructionMethod === 'gh'
										? it.workload * it.ring.length
										: (it.workload / 2) * it.ring.length
					}
				})



				// 小计
				this.subtotal = 0;
				resultData.forEach(it => {
					this.subtotal += Number.parseFloat(it.totalWordlorad)
				})
				this.subtotal = Math.floor(this.subtotal * 100) / 100
				this.pmprWorkloadList = resultData;
			},
			fnNavToCharts() {
				console.log(this.processId, JSON.stringify(this.processId))
				uni.navigateTo({
					url: `/subpackage-overhaul/pages/comprehensiveOverhaul/projectKanBan/detailChart?processId=${this.processId}&pageType=${this.pageType}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-page {
		// height: 100%;
		min-height: 100vh;
		width: 100%;
		background-color: #f5f5f9;
		/* #ifdef MP-WEIXIN */
			padding-top: 200rpx;
		/* #endif */

		.p-proce {
			width: 150rpx;
			height: 58rpx;
			line-height: 58rpx;
			border: 1px solid #2396ea;
			text-align: center;
			border-radius: 6px;
			margin-right: 20rpx;
			color: #2396ea;
		}

		.con_top {
			background-color: #fff;
			padding: 0 40rpx;

			.row_line {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #eaedf3;
				font-size: 16px;
				// font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #445469;
				    padding: 30rpx 0;
				// margin-bottom: 30rpx;
				// line-height: 60rpx;
				// .line_name {
				// 	flex: 2;
				// }

				// .line_value1 {
				// 	flex: 5;

				// }

				.line_value {
					display: flex;
					align-items: center;
					justify-content: space-between;

				}
			}
			.row_line:nth-last-child(1) {
				// box-shadow: 0px 4px 4px 0px rgba(47,128,237,0.1);
				border: none;
			}
		}

		.work_detail {
			background-color: #fff;
			padding: 8rpx 30rpx 20rpx 30rpx;
			line-height: 80rpx;
			.top_img {
				display: flex;
				overflow-x: auto;
				&>view{
					width: 200rpx;
					margin-right: auto;
				}
			}
		}

		.little_box {
			margin-top: 30rpx;
			background-color: #fff;
			padding: 0rpx 40rpx;
			line-height: 70rpx;
		}

		.num {
			text-align: right;
			line-height: 60rpx;
			margin-right: 20rpx;
		}
	}
	.xiaohao {
		background: #FFFFFF;
		box-shadow: 0px 4px 4px 0px rgba(47,128,237,0.1);
		// line-height: 100rpx;
		padding: 25rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 15px;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #445469;
	}
	
	.work-title {
		padding: 30rpx; 
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.card {
		background: #fff;
		padding: 10upx 32upx 0 28upx;
		font-weight: bold;
		
		.inline-item {
			height: 100upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #e2e5ed;
			margin-bottom: 10upx;
			
			&:last-of-type {
				border-bottom: none;
				margin-bottom: 0;
			}
			
			.label {
				color: #445469;
				flex-shrink: 0;
			}
			
			.label-content {
				max-width: 430upx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				padding-right: 4upx;
			}
		}
		.inline-item.ring {
			height: auto;
			.label-content.ring {
				white-space: normal;
			}
		}
	}
</style>
